<template>
  <ZZDialog class="main" title="地表抬升">
    <div class="main-container">
      <el-text class="title-label">抬升高度(米):</el-text>
      <el-input-number v-model="num" @change="handleChange" />
    </div>
  </ZZDialog>
</template>

<script setup>
import ZZDialog from '@/common/ZZDialog.vue';
import { useViewer } from '@/stores/viewer';
import { onUnmounted, ref } from 'vue';

const viewer = useViewer().viewer;
const num = ref(0);

function handleChange(v) {
  viewer.scene.terrainHeightOffset = v;
}

onUnmounted(() => {
  viewer.scene.terrainHeightOffset = 0;
});
</script>

<style scoped>
.main {
  position: absolute;
  left: calc(100% - 320px);
  top: 50px;
}

.main-container {
  margin: 10px;
  display: flex;
  flex-direction: row;
}

.title-label {
  width: 130px;
}
</style>
